<template>
  <div class="whole">
    <div class="background">
      <img
        src="../../img/create.png"
        style="width: 100%; height: 100%"
        alt=""
      />
    </div>
    <div class="body">
      <div class="xuanfu">
        <div class="bar_btn" @click="back">
          <i class="el-icon-s-home"></i>返回主页
        </div>
        <div class="bar_btn" @click="publish">
          <i class="el-icon-s-promotion"></i>发布问卷
        </div>
        <div class="bar_btn" @click="store">
          <i class="el-icon-folder-opened"></i>保存问卷
        </div>
      </div>
      <el-container>
        <el-aside width="240px" style="border-right: 2px solid #f5f5f5">
          <div class="tool_btn" style="margin: 20px 0">
            <el-button @click="preview" type="primary">预 览</el-button>
          </div>
          <div>
            <el-switch
              v-model="survey.mixed"
              active-text="乱序"
              inactive-text="顺序"
              style="margin-left: 60px"
            ></el-switch>
          </div>
          <div>
            <el-switch
              v-model="survey.numHidden"
              active-text="隐藏题号 "
              inactive-text="显示题号"
              style="margin-left: 30px"
            ></el-switch>
          </div>
          <el-tabs type="border-card" style="height: 80%">
            <el-tab-pane label="题型选择">
              <div class="tool">选择题</div>
              <div class="tool_btn">
                <el-button
                  @click="btn_single(survey.questions.length)"
                  style="margin: 8px 0"
                  >单选</el-button
                >
                <el-button @click="btn_multiple(survey.questions.length)"
                  >多选</el-button
                ><br />
                <el-button @click="btn_vote(survey.questions.length)"
                  >投票</el-button
                >
                <el-button @click="btn_enroll(survey.questions.length)"
                  >报名</el-button
                >
              </div>
              <div class="tool">填空题</div>
              <div class="tool_btn">
                <el-button @click="btn_fill(survey.questions.length)"
                  >填空</el-button
                >
                <el-button @click="btn_locate(survey.questions.length)"
                  >定位</el-button
                >
              </div>
              <div class="tool">评分题</div>
              <div class="tool_btn">
                <el-button @click="btn_score(survey.questions.length)"
                  >五星评分</el-button
                >
              </div>
              <div class="tool">快捷按钮</div>
              <div class="tool_btn">
                <el-button style="margin: 8px 0" @click="add_name"
                  >姓名填写</el-button
                >
                <el-button @click="add_phonenum">电话填写</el-button><br />
                <el-button @click="add_id">学号填写</el-button>
                <el-button @click="add_epd">疫情打卡</el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="问卷大纲">
              <div>
                <div style="padding: 8px; font-size: 18px">
                  {{ this.survey.title }}
                </div>
                <transition-group name="drag" class="list">
                  <div
                    v-for="(item, index) in survey.questions"
                    :key="item.label"
                    @dragenter="dragenter($event, index)"
                    @dragover="dragover($event, index)"
                    @dragstart="dragstart(index)"
                    draggable
                    style="
                      max-width: 200px;
                      padding: 9px 0;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      border-top: 1px solid #e0e0e0;
                    "
                  >
                    {{ index + 1 }}.(
                    <span v-if="item.type === 0">单选</span>
                    <span v-if="item.type === 1">多选</span>
                    <span v-if="item.type === 3">填空</span>
                    <span v-if="item.type === 2">评分</span>
                    <span v-if="item.type === 5">报名</span>
                    <span v-if="item.type === 4">投票</span>
                    <span v-if="item.type === 6">定位</span>
                    )
                    {{ item.stem }}
                  </div></transition-group
                >
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
        <el-main>
          <div style="text-align: center; margin: 40px 0">
            <el-input
              v-model="survey.title"
              placeholder="请输入标题..."
              type="textarea"
              autosize
              style="font-size: 30px; max-width: 40%"
            ></el-input>
          </div>
          <div style="text-align: center">
            <el-input
              v-model="survey.description"
              placeholder="请输入问卷描述..."
              type="textarea"
              autosize
              style="font-size: 15px; max-width: 60%"
            ></el-input>
          </div>
          <transition-group name="drag" class="list">
            <div
              v-for="(item, index) in survey.questions"
              :key="item.label"
              @dragenter="dragenter($event, index)"
              @dragover="dragover($event, index)"
              @dragstart="dragstart(index)"
              draggable
              style="border-top: 1px solid #e0e0e0; padding-bottom: 15px"
            >
              <div
                style="
                  margin: 0 auto;
                  width: 80%;
                  padding-top: 30px;
                  padding-bottom: 10px;
                "
              >
                <span v-if="!survey.numHidden"> 第 {{ index + 1 }} 题 </span>(
                <span v-if="item.type === 0">单选</span>
                <span v-if="item.type === 1">多选</span>
                <span v-if="item.type === 3">填空</span>
                <span v-if="item.type === 2">评分</span>
                <span v-if="item.type === 5">报名</span>
                <span v-if="item.type === 4">投票</span>
                <span v-if="item.type === 6">定位</span>
                )

                <el-switch
                  v-model="item.required"
                  active-text="必选"
                  inactive-text="非必选"
                  style="float: right"
                ></el-switch>
              </div>
              <div class="questions">
                <el-input
                  v-model="item.stem"
                  placeholder="请输入题目..."
                  type="textarea"
                  autosize
                  class="content"
                ></el-input>
              </div>
              <div class="questions_description">
                <el-input
                  v-model="item.description"
                  placeholder="请输入题目描述..."
                  type="textarea"
                  autosize
                  class="content"
                  style="font-size: 14px"
                ></el-input>
              </div>
              <div v-if="item.type === 0" class="questions">
                <el-radio-group>
                  <el-radio
                    v-for="(choice, choice_index) in item.propJson.options"
                    :key="choice_index"
                    style="display: block"
                    ><div style="display: inline-block">
                      <el-input
                        v-model="item.propJson.options[choice_index]"
                        placeholder="请输入选项内容..."
                        style="width: 120%"
                      ></el-input
                      ><i
                        class="el-icon-circle-plus-outline select_btn"
                        @click="add_select(item, choice_index)"
                        title="在下方新增选项"
                      ></i
                      ><i
                        class="el-icon-remove-outline select_btn"
                        @click="delete_select(item, choice_index)"
                        title="删除本选项"
                      ></i>
                      <i
                        class="el-icon-top select_btn"
                        @click="up_select(item, choice_index)"
                        title="选项上移"
                      ></i>
                      <i
                        class="el-icon-bottom select_btn"
                        @click="down_select(item, choice_index)"
                        title="选项下移"
                      ></i>
                    </div>
                  </el-radio>
                </el-radio-group>
              </div>
              <div
                v-else-if="item.type === 1 || item.type === 4"
                class="questions"
              >
                <el-radio-group>
                  <el-radio
                    v-for="(choice, choice_index) in item.propJson.options"
                    :key="choice_index"
                    style="display: block"
                    ><div style="display: inline-block">
                      <el-input
                        v-model="item.propJson.options[choice_index]"
                        placeholder="请输入选项内容..."
                        style="width: 120%"
                      ></el-input
                      ><i
                        class="el-icon-circle-plus-outline select_btn"
                        @click="add_select(item, choice_index)"
                        title="在下方新增选项"
                      ></i
                      ><i
                        class="el-icon-remove-outline select_btn"
                        @click="delete_select(item, choice_index)"
                        title="删除本选项"
                      ></i>
                      <i
                        class="el-icon-top select_btn"
                        @click="up_select(item, choice_index)"
                        title="选项上移"
                      ></i>
                      <i
                        class="el-icon-bottom select_btn"
                        @click="down_select(item, choice_index)"
                        title="选项下移"
                      ></i>
                    </div>
                  </el-radio>
                </el-radio-group>
                <div>
                  <span style="font-size: 14px"> 最少选择 </span
                  ><el-input-number
                    v-model="item.propJson.min"
                    :min="1"
                    :max="item.propJson.max"
                    size="mini"
                    style="border: 1px solid #dcdfe6; border-radius: 4px"
                  ></el-input-number>
                  <span> 最多选择 </span
                  ><el-input-number
                    v-model="item.propJson.max"
                    :min="item.propJson.min"
                    :max="item.propJson.options.length"
                    size="mini"
                    style="border: 1px solid #dcdfe6; border-radius: 4px"
                  ></el-input-number>
                </div>
              </div>
              <div v-else-if="item.type === 3" class="questions">
                <el-input
                  type="textarea"
                  placeholder="在这里填写回答..."
                  style="margin-top: 10px"
                ></el-input>
              </div>
              <div v-else-if="item.type === 2" class="questions">
                <el-rate style="margin-top: 10px"></el-rate>
              </div>
              <div v-else-if="item.type === 5" class="questions">
                <el-radio-group>
                  <el-radio
                    v-for="(choice, choice_index) in item.propJson.options"
                    :key="choice_index"
                    style="display: block"
                    ><div style="display: inline-block">
                      <el-input
                        v-model="item.propJson.options[choice_index]"
                        placeholder="请输入选项内容..."
                        style="width: 120%"
                      ></el-input
                      ><i
                        class="el-icon-circle-plus-outline select_btn"
                        @click="add_select(item, choice_index)"
                        title="在下方新增选项"
                      ></i
                      ><i
                        class="el-icon-remove-outline select_btn"
                        @click="delete_select(item, choice_index)"
                        title="删除本选项"
                      ></i>
                      <i
                        class="el-icon-top select_btn"
                        @click="up_select(item, choice_index)"
                        title="选项上移"
                      ></i>
                      <i
                        class="el-icon-bottom select_btn"
                        @click="down_select(item, choice_index)"
                        title="选项下移"
                      ></i>
                    </div>
                    <div style="display: inline-block; margin-left: 210px">
                      <el-popover placement="right" trigger="click"
                        ><div style="text-align: center">
                          <el-input-number
                            size="mini"
                            style="width: 100px"
                            :min="0"
                            v-model="item.propJson.limit[choice_index]"
                          ></el-input-number>
                        </div>
                        <el-button slot="reference" type="text"
                          >设定人数限制</el-button
                        >
                      </el-popover>
                      <span></span
                      ><span v-if="item.propJson.limit[choice_index] == ''"
                        >(无限制)</span
                      ><span v-else
                        >({{ item.propJson.limit[choice_index] }}人)</span
                      >
                    </div>
                  </el-radio>
                </el-radio-group>
                <div>
                  <span style="font-size: 14px"> 最少选择 </span
                  ><el-input-number
                    v-model="item.propJson.min"
                    :min="1"
                    :max="item.propJson.max"
                    size="mini"
                    style="border: 1px solid #dcdfe6; border-radius: 4px"
                  ></el-input-number>
                  <span> 最多选择 </span
                  ><el-input-number
                    v-model="item.propJson.max"
                    :min="item.propJson.min"
                    :max="item.propJson.options.length"
                    size="mini"
                    style="border: 1px solid #dcdfe6; border-radius: 4px"
                  ></el-input-number>
                </div>
              </div>
              <div v-if="item.type === 6" class="questions">
                <div>
                  <el-input
                    style="
                      display: inline-block;
                      width: 400px;
                      border: 1px solid #dcdfe6;
                      border-radius: 4px;
                    "
                  ></el-input>
                  <el-button>点击获取当前位置</el-button>
                </div>
              </div>
              <div class="questions">
                <el-button type="text" @click="up(index)"
                  ><i class="el-icon-caret-top"></i>题目上移</el-button
                >
                <el-button type="text" @click="down(index)"
                  ><i class="el-icon-caret-bottom"></i>题目下移</el-button
                >

                <el-popover trigger="click" style="margin: 0 10px" width="300"
                  ><div style="text-align: center">
                    <el-button size="mini" @click="btn_single(index)"
                      >单选</el-button
                    >
                    <el-button size="mini" @click="btn_multiple(index)"
                      >多选</el-button
                    >
                    <el-button size="mini" @click="btn_fill(index)"
                      >填空</el-button
                    >
                    <el-button size="mini" @click="btn_score(index)"
                      >评分</el-button
                    >
                    <el-button size="mini" @click="btn_vote(index)"
                      >投票</el-button
                    >
                    <el-button size="mini" @click="btn_enroll(index)"
                      >报名</el-button
                    >
                    <el-button size="mini" @click="btn_locate(index)"
                      >定位</el-button
                    >
                  </div>
                  <el-button type="text" slot="reference"
                    ><i class="el-icon-s-unfold"></i>在此题后新增题目</el-button
                  ></el-popover
                ><el-button type="text" @click="delete_question(index)"
                  ><i class="el-icon-delete-solid"></i>删除本题</el-button
                >
              </div>
            </div>
          </transition-group>
          <div
            style="
              text-align: center;
              padding: 20px 0;
              border-top: 2px solid #e0e0e0;
            "
          >
            <el-button type="primary" style="width: 130px" @click="publish"
              >发 布</el-button
            >
            <el-button style="width: 130px" @click="store">保 存</el-button>
          </div>
        </el-main>
      </el-container>
    </div>
    <el-dialog title="发布设置" :visible.sync="isPublish">
      <div>
        <span>定时发布(默认为立即发布):</span><br /><el-date-picker
          v-model="publish_datetime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div style="margin-top: 20px">
        <span>截止时间(默认为无截止时间):</span><br /><el-date-picker
          v-model="deadline_datetime"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div>
      <div style="margin-top: 20px">
        <span>问卷口令(默认为无需口令):</span>
        <el-input
          placeholder="输入问卷口令..."
          v-model="survey.code"
          prefix-icon="el-icon-lock"
        ></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirmPublish" type="primary">确认发布</el-button>
        <el-button @click="isPublish = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="分享问卷链接"
      :visible.sync="share"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <div style="font-size: 25px" class="link">
        问卷链接 :
        <el-input
          v-model="link"
          style="
            width: 300px;
            border: 1px solid #dcdfe6;
            font-size: 18px;
            border-radius: 5px;
          "
        ></el-input
        ><el-button @click="copy">复 制</el-button>
        <el-button @click="open_survey">打 开</el-button>
      </div>
      <div style="font-size: 25px">二维码 :</div>
      <div style="text-align: center">
        <vue-qr :text="link" :size="200" :margin="10"></vue-qr>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="back" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <div class="preview">
      <el-dialog :visible.sync="isPreview" fullscreen
        ><iframe
          src="http://106.12.141.103:8080/index.html#/preview"
          frameborder="0"
          width="100%"
          height="760px"
          v-if="isPreview"
        ></iframe>
        <div
          slot="footer"
          class="dialog-footer"
          style="background-color: #55585a"
        >
          <el-button
            @click="isPreview = false"
            type="text"
            style="margin-right: 50px; font-size: 16px"
            >关闭问卷预览</el-button
          >
        </div></el-dialog
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      label: 0,
      dragIndex: "",
      enterIndex: "",
      isPreview: false,
      deadline_datetime: "",
      publish_datetime: "",
      link: "",
      newQuestions: [],
      editQuestions: [],
      deleteQuestions: [],
      sid: "",
      survey: {
        author: "",
        uid: "",
        type: 0,
        title: "",
        mixed: false,
        numHidden: false,
        code: "",
        description: "",
        // creTime: "",
        // pubTime: "",
        deadline: "",
        status: 2,
        questions: [],
      },
      isPublish: false,
      share: false,
    };
  },
  created() {
    if (this.$store.state.isContinue) {
      this.survey = this.$store.state.question;
      this.$store.state.isContinue = false;
      for (var i = 0; i < this.survey.questions.length; i++) {
        this.survey.questions[i]["label"] = this.label++;
      }
    } else {
      this.survey.author = window.sessionStorage.getItem("username");
      this.survey.uid = window.sessionStorage.getItem("uid");
      // this.survey.creTime = Date.parse(new Date());
    }
  },
  methods: {
    preview() {
      if (this.survey.questions.length == 0) alert("问卷至少需要一道题...");
      else {
        localStorage.setItem("survey", JSON.stringify(this.survey));
        this.isPreview = true;
      }
    },
    btn_single(index) {
      var single = {
        type: 0,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          options: ["", ""],
        },
      };
      this.survey.questions.splice(index + 1, 0, single);
    },
    btn_multiple(index) {
      var multiple = {
        type: 1,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          options: ["", ""],
          min: 1,
          max: 2,
        },
      };
      this.survey.questions.splice(index + 1, 0, multiple);
    },
    btn_fill(index) {
      var fill = {
        type: 3,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          num: 1,
        },
      };
      this.survey.questions.splice(index + 1, 0, fill);
    },
    btn_score(index) {
      var score = {
        type: 2,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          min: 1,
          max: 5,
          interval: 1,
        },
      };
      this.survey.questions.splice(index + 1, 0, score);
    },
    btn_vote(index) {
      var vote = {
        type: 4,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          options: ["", ""],
          min: 1,
          max: 1,
        },
      };
      this.survey.questions.splice(index + 1, 0, vote);
    },
    btn_enroll(index) {
      var enroll = {
        type: 5,
        label: this.label++,
        stem: "",
        description: "",
        required: true,
        propJson: {
          options: ["", ""],
          min: 1,
          max: 1,
          limit: ["", ""],
        },
      };
      this.survey.questions.splice(index + 1, 0, enroll);
    },
    btn_locate(index) {
      var locate = {
        type: 6,
        label: this.label++,
        stem: "点击按钮获取位置信息:",
        description: "",
        required: true,
        propJson: {},
      };
      this.survey.questions.splice(index + 1, 0, locate);
    },
    add_name() {
      var name = {
        type: 3,
        label: this.label++,
        stem: "请填写你的姓名:",
        description: "",
        required: true,
        propJson: {
          num: 1,
        },
      };
      this.survey.questions.push(name);
    },
    add_phonenum() {
      var num = {
        type: 3,
        label: this.label++,
        stem: "请填写你的电话号码:",
        description: "",
        required: true,
        propJson: {
          num: 1,
        },
      };
      this.survey.questions.push(num);
    },
    add_id() {
      var id = {
        type: 3,
        label: this.label++,
        stem: "请填写你的学号:",
        description: "",
        required: true,
        propJson: {
          num: 1,
        },
      };
      this.survey.questions.push(id);
    },
    add_epd() {
      var q = [
        {
          type: 3,
          stem: "请填写你的学号:",
          description: "",
          required: true,
          propJson: { num: 1 },
        },
        {
          type: 3,
          stem: "请填写你的姓名:",
          description: "",
          required: true,
          propJson: { num: 1 },
        },
        {
          type: 0,
          stem: "请选择你现在的体温:",
          description: "",
          required: true,
          propJson: {
            options: [
              "36.0度及以下",
              "36.0~37.0度",
              "37.0~37.5度",
              "37.5~38.0度",
              "38.0度及以上",
            ],
          },
        },
        {
          type: 0,
          stem: "近期是否到过中高风险地区:",
          description: "",
          required: true,
          propJson: { options: ["是", "否"] },
        },
        {
          type: 0,
          stem: "近期是否出现新冠症状:",
          description: "",
          required: true,
          propJson: { options: ["是", "否"] },
        },
        {
          type: 6,
          stem: "点击按钮获取位置信息:",
          description: "",
          required: true,
          propJson: {},
        },
      ];
      for (var i = 0; i < q.length; i++) {
        q[i]["label"] = this.label++;
        this.survey.questions.push(q[i]);
      }
    },
    add_select(item, index) {
      item.propJson.options.splice(index + 1, 0, "");
      if (item.type === 5) {
        item.propJson.limit.splice(index + 1, 0, "");
      }
    },
    delete_select(item, index) {
      if (item.propJson.options.length === 1) {
        alert("题目选项不能少于1个...");
        return;
      }
      item.propJson.options.splice(index, 1);
      if (item.type === 5) {
        item.propJson.limit.splice(index, 1);
      }
    },
    delete_question(index) {
      if (this.survey.questions[index].qid != null) {
        this.deleteQuestions.push(this.survey.questions[index].qid);
      }
      this.survey.questions.splice(index, 1);
    },
    up_select(item, index) {
      if (index == 0) return;
      else {
        item.propJson.options.splice(
          index,
          1,
          ...item.propJson.options.splice(
            index - 1,
            1,
            item.propJson.options[index]
          )
        );
      }
    },
    down_select(item, index) {
      if (index == item.propJson.options.length - 1) return;
      else {
        item.propJson.options.splice(
          index,
          1,
          ...item.propJson.options.splice(
            index + 1,
            1,
            item.propJson.options[index]
          )
        );
      }
    },
    up(index) {
      if (index === 0) return;
      else {
        this.survey.questions.splice(
          index,
          1,
          ...this.survey.questions.splice(
            index - 1,
            1,
            this.survey.questions[index]
          )
        );
      }
    },
    down(index) {
      if (index == this.survey.questions.length - 1) return;
      else {
        this.survey.questions.splice(
          index,
          1,
          ...this.survey.questions.splice(
            index + 1,
            1,
            this.survey.questions[index]
          )
        );
      }
    },
    publish() {
      if (this.survey.questions.length == 0) alert("问卷至少需要一道题...");
      else this.isPublish = true;
    },
    confirmPublish() {
      this.isPublish = false;
      if (this.deadline_datetime !== "")
        this.survey.deadline = Date.parse(this.deadline_datetime);
      // this.survey.pubTime = Date.parse(new Date());
      this.survey.status = 1;
      // console.log(JSON.stringify(this.survey));
      this.uploadSurvey();
    },
    store() {
      if (this.survey.questions.length == 0) alert("问卷至少需要一道题...");
      else {
        this.survey.status = 2;
        this.uploadSurvey();
      }
    },
    clone(obj) {
      //深拷贝
      return JSON.parse(JSON.stringify(obj));
    },
    uploadSurvey() {
      console.log(this.survey);
      this.$http
        .put("/survey/save", this.survey)
        .then((res) => {
          var sid = res.data.sid;
          // console.log(sid);
          this.sid = JSON.parse(JSON.stringify(sid));
          var questions = this.clone(this.survey.questions);
          for (var i = 0; i < questions.length; i++) {
            questions[i]["num"] = i;
            if (questions[i]["qid"] != null) {
              this.editQuestions.push(questions[i]);
            } else {
              this.newQuestions.push(questions[i]);
            }
          }
          // console.log(this.newQuestions);
          // console.log(this.editQuestions);
          if (this.newQuestions.length > 0) {
            for (var i = 0; i < this.newQuestions.length; i++) {
              this.newQuestions[i].propJson = JSON.stringify(
                this.newQuestions[i].propJson
              );
            }
            this.$http
              .post("/question/add?sid=" + sid, this.newQuestions)
              .then((res) => {})
              .catch((err) => {
                this.$message.error("网络错误,请稍后再试!");
                return false;
              });
          }
          if (this.editQuestions.length > 0) {
            for (var i = 0; i < this.editQuestions.length; i++) {
              this.editQuestions[i].propJson = JSON.stringify(
                this.editQuestions[i].propJson
              );
            }
            this.$http
              .post("/question/update?sid=" + sid, this.editQuestions)
              .then((res) => {})
              .catch((err) => {
                this.$message.error("网络错误,请稍后再试!");
                return false;
              });
          }
          if (this.deleteQuestions.length > 0) {
            console.log(this.deleteQuestions);
            var del = this.deleteQuestions;
            console.log(del);
            this.$http
              .delete("/question/delete?sid=" + sid, {
                data: this.deleteQuestions,
              })
              .then((res) => {})
              .catch((err) => {
                this.$message.error("网络错误,请稍后再试!");
                console.log(1);
                return false;
              });
          }
          if (this.survey.status == 1) {
            this.open();
            this.link =
              "http://106.12.141.103:8080/index.html#/question/" + this.sid;
            this.share = true;
          } else if (this.survey.status == 2) {
            this.$message.success("保存成功!");
            this.$router.push("mainpage");
          }
        })
        .catch((err) => {
          this.$message.error("网络错误,请稍后再试!");
          return false;
        });
    },
    open() {
      this.$http
        .put(
          "/survey/status?sid=" +
            this.sid +
            "&status=Open" +
            (this.isEmpty(this.survey.code)
              ? ""
              : "&code=" + this.survey.code) +
            (this.isEmpty(this.deadline_datetime)
              ? ""
              : "&deadline=" + Date.parse(this.deadline_datetime)) +
            (this.isEmpty(this.publish_datetime)
              ? ""
              : "&pubTime=" + Date.parse(this.publish_datetime))
        )
        .then()
        .catch((err) => {
          this.$message.error("网络错误,请稍后再试!");
        });
    },
    isEmpty(property) {
      return (
        property === null || property === "" || typeof property === "undefined"
      );
    },
    storeSurvey(sid) {
      this.$http
        .put("/survey/status?sid=" + sid + "&status=Draft")
        .catch((err) => {
          this.$message.error("网络错误,请稍后再试!");
          return false;
        });
      return true;
    },
    back() {
      this.share = false;
      this.$router.push("/mainpage");
    },
    copy() {
      var cInput = document.createElement("input");
      cInput.value = this.link;
      document.body.appendChild(cInput);
      cInput.select(); // 选取文本框内容
      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
      // Input要在正常的编辑状态下原生复制方法才会生效
      document.execCommand("copy");
      this.$message({
        type: "success",
        message: "复制成功",
      });
      document.body.removeChild(cInput);
    },
    open_survey() {
      window.open(this.link, "_blank");
    },
    dragstart(index) {
      this.dragIndex = index;
    },
    dragenter(e, index) {
      e.preventDefault();
      if (this.dragIndex !== index) {
        const moving = this.survey.questions[this.dragIndex];
        this.survey.questions.splice(this.dragIndex, 1);
        this.survey.questions.splice(index, 0, moving);
        this.dragIndex = index;
      }
    },
    dragover(e, index) {
      e.preventDefault();
    },
  },
};
</script>


<style lang="less" scoped>
.whole {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}
.background {
  // background-image: url("../../img/1.jpg");
  /* 相对于视口固定 */
  // background-attachment: fixed;
  // background-size: cover;
  // background-position: 50% 50%;
  // position: relative;
  // text-align: center;
  // overflow: hidden;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
}
.body {
  height: 100%;
  width: 70%;
  margin: 0 auto;
  background-color: #fff;
}
.xuanfu {
  width: 100px;
  position: fixed;
  right: 100px;
  top: 450px;
  margin-top: -190px;
  z-index: 1100;
}
.bar_btn {
  width: 100%;
  height: 40px;
  font-size: 17px;
  color: #606266;
  line-height: 40px;
  border: 2px solid #dcdfe6;
  margin-bottom: 10px;
  text-align: center;
  border-radius: 5px;
  user-select: none;
  background-color: #fff;
}
.bar_btn:hover {
  color: #409eff;
  border: 2px solid #409eff;
}
/deep/.el-main {
  margin-left: 20px;
  padding: 0;
}
.tool {
  text-align: center;
  font-weight: 550;
  font-size: 20px;
  margin: 9px 0;
}
.tool_btn {
  text-align: center;
}
.title {
  max-width: 40%;
}
/deep/.el-input__inner {
  border: 0;
  padding: 0;
}
/deep/.el-textarea__inner {
  border: 0;
  padding: 0;
}
.questions {
  width: 80%;
  margin: 0 auto;
}
.content {
  max-width: 90%;
  font-size: 18px;
}
/deep/.preview .el-dialog__header {
  padding: 0;
}
/deep/.preview .el-dialog__body {
  padding: 0;
}
/deep/.preview .el-dialog__footer {
  padding: 0;
}
.select_btn {
  font-size: 23px;
  line-height: 45px;
  margin: 0 4px;
}
.questions_description {
  width: 80%;
  margin: 5px auto;
}
/deep/.link .el-input__inner {
  background: #f5f5f5;
}
.list {
  list-style: none;
  .drag-move {
    transition: transform 0.3s;
  }
}
/deep/.el-tabs__item {
  width: 120px;
  text-align: center;
}
/deep/.el-textarea__inner {
  resize: none;
}
</style>